<template>
  <div class="content">
    <Header title="收货地址" style="background: white"></Header>
    <div class="list">
      <van-address-list
        v-model="chosenAddressId"
        :list="list"
        :disabled-list="disabledList"
        disabled-text=""
        default-tag-text="默认"
        @add="onAdd"
        @edit="onEdit"
        :switchable="false"
      >
      </van-address-list>
    </div>

    <!-- <div style="flex-grow: 1">
      <div v-for="(item, index) in list" :key="index">
        <div
          style="padding: 5px"
          @click="
            () => {
              toEdit(item)
            }
          "
        >
          <AddressCard
            :id="item.id"
            :name="item.name"
            :phone="item.telephone"
            :is-default="item.isDefault"
            :address="
              item.provinceName +
              item.cityName +
              item.areaName +
              (item.streetName || '') +
              item.address
            "
          ></AddressCard>
        </div>
      </div>
      <div style="height: 80px"></div>
      <div
        v-if="!pageLoading"
        class="bottom"
        style="
          justify-content: center;
          width: 100%;
          display: flex;
          flex-direction: row;
        "
      >
        <van-button type="primary" round @click="toAdd" size="normal"
          >手动新增</van-button
        >
      </div>
     
    </div> -->
    <div style="display: flex; justify-content: center; align-items: center">
      <van-loading
        class="loading-bg"
        type="spinner"
        color="#303030"
        size="24px"
        v-show="pageLoading"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import AddressCard from '@/views/address/components/address-item.vue'
import adminRequest from '@/utils/adminRequest'
import { ref } from 'vue'
import router from '@/router/index'
import Header from '@/components/header/Header.vue'
// import { onLoad } from '@dcloudio/uni-app'
const list = ref([
  // {
  //   id: '1',
  //   name: '张三',
  //   tel: '13000000000',
  //   address: '浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室',
  //   isDefault: true,
  // },
  // {
  //   id: '2',
  //   name: '李四',
  //   tel: '1310000000',
  //   address: '浙江省杭州市拱墅区莫干山路 50 号',
  // },
])
const disabledList = [
  //   {
  //     id: '3',
  //     name: '王五',
  //     tel: '1320000000',
  //     address: '浙江省杭州市滨江区江南大道 15 号',
  //   },
]
const chosenAddressId = ref(null)
const pageLoading = ref(true)
adminRequest({ url: '/wl-portal/portal/address/list', method: 'get' })
  .then((res) => {
    console.log(res)
    list.value = res.data.map((e) => {
      return {
        id: e.id,
        name: e.name,
        tel: e.telephone,
        address:
          e.provinceName +
          e.cityName +
          e.areaName +
          (e.streetName || '') +
          e.address,
        isDefault: e.isDefault === 1,
      }
    })
    console.log(list.value.length)
  })
  .finally(() => {
    pageLoading.value = false
  })
function onEdit(item) {
  console.log('onEdit', item)
  router.push({
    path: `/my-address/edit`,
    query: {
      id: item.id,
    },
  })
}
function onAdd() {
  console.log('onadd')
  router.push({ path: `/my-address/edit` })
}
</script>

<style scoped lang="scss">
.list {
  overflow-y: scroll;
  height: calc(100vh - 100px);
}
.content {
  background: #f9f8f3;
}
.bottom {
  position: fixed;
  bottom: calc(var(--window-bottom));
  z-index: 1030;
  margin-bottom: 20px;
}

.addButton {
  width: 134px;
  height: 42px;
  line-height: 20px;
  border-radius: 4px;
  background-color: rgba(56, 156, 253, 1);
  color: rgba(255, 255, 255, 1);
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>
